<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:jsf="http://xmlns.jcp.org/jsf"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui">

    <head jsf:id="header"> 
        <title>Cronograma</title>
        <link rel="stylesheet" type="text/css" 
              href="#{request.contextPath}/resources/bootstrap/css/bootstrap.min.css" />

        <h:outputScript library="js" name="locale.min.js" />
        <style>
            body {
                padding-top: 70px;
                background-image: url("#{scheduleBean.image}");
                background-repeat: no-repeat;
                -webkit-background-size: cover; /* For WebKit*/
                -moz-background-size: cover;    /* Mozilla*/
                -o-background-size: cover;      /* Opera*/
                background-size: cover;         /* Generic*/
            }
            .navbar {
                height: 30px;
            }
            .panel{
                opacity:0.9;
            }
            .menubutton-for-table button {
                text-decoration: transparent;
                width: 25px;
                height: 18px !important;
            }
            .menubutton-for-table button .ui-button-text {
                display: none;
            }
            .menubutton-for-table .ui-state-default .ui-icon {
                background-position: -195px -112px !important;
            }
        </style>
    </head>
    <body jsf:id="bodyx">
        <div class="navbar navbar-default navbar-fixed-top" role="navigation">
            <div class="container">
                <div class="navbar-header">
                    <button class="navbar-toggle collapsed" data-target=".navbar-collapse" data-toggle="collapse" type="button" >
                        <span class="sr-only">Menú</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="index.jsf" target="_blank">Vista Común</a>
                </div>
                <h:form>
                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li class="active" style="padding-right: 3px;">
                            <a href="loged.jsf">Cronograma</a>
                        </li>
                        <li class="active" style="padding-right: 3px;">
                            <a href="image.jsf" >Programación Imagenes</a>
                        </li>
                        <li class="active">
                            <a href="plantilla.jsf" >Plantillas</a>
                        </li>
                    </ul>
                    <ul class="nav navbar-nav navbar-right">
                        <li>
                            <p:commandLink ajax="false" action="#{scheduleBean.logOut()}">Salir</p:commandLink>
                        </li>
                    </ul>
                </div>
                    </h:form>
            </div>
        </div>
        <div class="container">
            <p:messages autoUpdate="true" closable="true" />
            <p style="font-size: 20px;"><strong>Creación de Plantillas</strong></p>
            <p:panel style="width: 100%" styleClass="panel">
                <h:form id="formFroems">
                    Nombre Plantilla: <br/>
                    <h:inputText value="#{scheduleBean.templateDescription.name}"
                                 required="true" requiredMessage="Falta nombre de plantilla" />
                    <br/>
                    Contenido de Pantilla: <br/>
                    <p:editor id="editor" value="#{scheduleBean.templateDescription.descHtml}" 
                               required="true" requiredMessage="Falta contenido de plantilla"/>  
                    <p:commandButton value="Guardar" action="#{scheduleBean.saveOrUpdateTemplate()}" 
                                     update="@form, :formTabIdd"/>
                    <p:commandButton value="Limpiar" 
                                     action="#{scheduleBean.clearTemplateDescription()}"
                                     update="@form" />
                </h:form>
                <p:separator />
                <div align="center">
                    <h:form id="formTabIdd">
                        <p:dataTable value="#{scheduleBean.listTemplate}" var="template"
                                     emptyMessage="No hay plantillas" id="datTaId">
                            <p:column width="5">
                                <p:menuButton styleClass="menubutton-for-table">  
                                    <p:menuitem value="Editar" icon="ui-icon-pencil" 
                                                update=":formFroems">  
                                        <f:setPropertyActionListener 
                                            target="#{scheduleBean.templateDescription}"
                                            value="#{template}" />
                                    </p:menuitem>
                                    <p:separator />
                                    <p:menuitem value="Eliminar" 
                                                icon="ui-icon-trash"
                                                update=":formFroems" 
                                                action="#{scheduleBean.removeTemplate(template)}"/>
                                </p:menuButton>
                            </p:column>
                            <p:column headerText="Plantillas">
                                #{template.name}
                            </p:column>
                        </p:dataTable>
                    </h:form>
                </div>
            </p:panel>

        </div>

        <script src="resources/bootstrap/js/bootstrap.min.js" />

    </body>

</html>
